<template>
  <div>
    <!-- {{ route.params.id }}--{{ route.params.name }}--{{ route.params.hobby }} -->
      欢迎
      <br>
    <button @click="gohome">返回主页</button>
    <button @click="back">回退</button>
    <button @click="forward">前进1步</button>
    <button @click="go">回退2步</button>
      
  </div>
</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue'
import {useRoute,useRouter} from 'vue-router'

// const route = useRoute()
defineProps(['id','name','hobby'])

// 编程式导航
// 相关网站：https://router.vuejs.org/zh/guide/essentials/navigation.html
const router = useRouter()

function gohome(){
  //写哪到哪
  router.push('/home')
}
function back(){
  //回退上一级
  router.back()
}
function forward(){
  //前进下一级
  router.forward()
}
function go(){
  //
  router.go(-2)
}

</script>


<style lang='scss' scoped>

</style>